<template>
  <div class="pz_box cardCont">
    <template v-if="content.style == '1'">
      <div class="hd_list">
        <div
          v-for="(item, index) in hotMealConfig.venueContent.customList"
          :key="index"
          class="item"
        >
          <img class="img mb10" :src="item.teacherImage || item.icon" alt="">
          <div class="name mb10">{{ item.teacherName || item.title }}</div>
          <div v-if="content.param.indexOf('2') > -1" class="level">
            <span v-if="item.levelName || item.bean">{{
              item.levelName || item.bean.teacherLevel
            }}</span>
          </div>
          <template v-if="content.param.indexOf('1') > -1">
            <div
              v-if="item.bean && item.bean.classNum"
              class="time placeholder9"
            >
              {{ translate("leiji") }}{{ item.bean.classNum || 0
              }}{{ translate("keshi") }}
            </div>
            <div v-else class="time placeholder9">
              {{ translate("leiji") }}{{ item.classNum || 0
              }}{{ translate("keshi") }}
            </div>
          </template>
        </div>
      </div>
    </template>
    <template v-if="content.style == '2'">
      <div class="zy_list">
        <div
          v-for="(item, index) in hotMealConfig.venueContent.customList"
          :key="index"
          class="item"
        >
          <img class="img" :src="item.teacherImage || item.icon" alt="">
          <div class="content df_ac flex1">
            <div class="left flex1">
              <div class="df">
                <span class="name">{{ item.teacherName || item.title }}</span>
                <span v-if="content.param.indexOf('2') > -1" class="level">
                  <span v-if="item.levelName || item.bean">{{
                    item.levelName || item.bean.teacherLevel
                  }}</span>
                </span>
              </div>
              <template v-if="content.param.indexOf('1') > -1">
                <div
                  v-if="item.bean && item.bean.classNum"
                  class="time placeholder9"
                >
                  {{ translate("leiji") }}{{ item.bean.classNum || 0
                  }}{{ translate("keshi") }}
                </div>
                <div v-else class="time placeholder9">
                  {{ translate("leiji") }}{{ item.classNum || 0
                  }}{{ translate("keshi") }}
                </div>
              </template>
            </div>
            <div class="detail">{{ translate("detail") }}</div>
          </div>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
export default {
  props: {
    config: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      hotMealConfig: {
        content: {},
        venueContent: {
          customList: []
        }
      },
      content: {}
    }
  },
  watch: {
    config(val) {
      this.hotMealConfig = this.config
      this.content = this.config.content
    }
  },
  methods: {

  }

}
</script>

<style lang="scss" scoped>
@import "@/styles/variables.scss";
.hd_list {
  display: flex;
  width: 100%;
  overflow-x: auto;
  .item {
    text-align: center;
    padding: 20px;
    flex-shrink: 0;
    margin-right: 20px;
    width: 216px;
    height: 266px;
    background: #ffffff;
    border-radius: 8px;
    .img {
      margin-top: 20px;
      width: 80px;
      height: 80px;
      border: 1px solid #f7f7f7;
      overflow: hidden;
      border-radius: 50%;
      overflow: hidden;
    }
    .name {
      font-size: 32px;
    }
    .level {
      color: $Color;
    }
  }
}
.zy_list {
  .item {
    width: 100%;
    height: 150px;
    background: #ffffff;
    border-radius: 8px;
    padding: 20px;
    display: flex;
    margin-bottom: 20px;
    align-items: center;
    .img {
      width: 100px;
      height: 100px;
      border: 1px solid #f7f7f7;
      overflow: hidden;
      margin-right: 20px;
      border-radius: 50%;
      overflow: hidden;
    }
    .content {
      .name {
        font-size: 32px;
        margin-bottom: 20px;
        margin-right: 10px;
      }
      .level {
        color: $Color;
        border: 1px solid $Color;
        height: 34px;
        padding: 0 6px;
      }
    }
    .detail {
      color: $Color;
      padding: 6px 20px;
      border-radius: 30px;
      height: 46px;
      border: 1px solid $Color;
    }
  }
}
</style>
